<template>
  <el-drawer
    title="保存相似人群扩展配置"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer analyse-similar-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="150px" :rules="editFormRules" ref="editForm">
          <el-form-item label="分析任务名称" prop="tagNm">
            <el-input v-model="editForm.tagNm" placeholder="请输入分析任务名称"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="tagStory">
            <el-input
              placeholder="请输入备注"
              v-model="editForm.tagStory"
              type="textarea"
              :maxlength="1000"
              :rows="5"
              :show-word-limit="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="特征配置" prop="featureType">
            <el-radio-group v-model="editForm.featureType">
              <el-radio :label="1">全部特征</el-radio>
              <el-radio :label="2">模板特征</el-radio>
              <el-radio :label="3">自定义特征</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择模板" prop="featureValue" v-if="editForm.featureType === 2">
            <el-select v-model="editForm.featureValue" popper-class="tmpl-select">
              <el-option label="---" value=""></el-option>
              <el-option v-for="item in featureList" :key="item.tmplId" :label="item.tmplNm" :value="item.tmplId">
                <span>{{ item.tmplNm }}</span>
                <el-tooltip effect="dark" content="删除模板" placement="top" :enterable="false">
                  <span @click.stop="deleteTmpl(item)" class="tmpl-delete">
                    <i class="el-icon-close"></i>
                  </span>
                </el-tooltip>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择标签" prop="featureTags" v-if="editForm.featureType === 3">
            <feature-tags :selectedList="editForm.featureTags"></feature-tags>
          </el-form-item>
          <el-form-item label="更新频率" prop="execFrequency">
            <el-radio-group v-model="editForm.execFrequency">
              <el-radio v-for="item in $dictList('$exec_frequency')" :key="item.key" :label="item.key">
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="editForm.execFrequency">
            <el-form-item label="执行日期" prop="execDtList" v-if="editForm.execFrequency === 2">
              <el-checkbox-group v-model="editForm.execDtList">
                <el-checkbox v-for="date in 31" :label="date" :key="date">{{ date }}</el-checkbox>
                <el-checkbox :label="999">月末</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="执行星期" prop="execWkList" v-if="editForm.execFrequency === 3">
              <el-checkbox-group v-model="editForm.execWkList">
                <el-checkbox v-for="week in 7" :label="week" :key="week">{{ weekShow(week) }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="执行时间" prop="execTm">
              <el-col :span="12">
                <el-time-picker
                  v-model="editForm.execTm"
                  size="mini"
                  placeholder="执行时间"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </el-col>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="beforeClose">取消</el-button>
      <el-button type="primary" size="medium" @click="save">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import featureTags from './components/feature-tag-item'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  components: {
    featureTags
  },
  watch: {
    'editForm.featureType'(val) {
      if (val === 2) this.getFeatureList()
    }
  },
  data() {
    return {
      drawerVisible: false,
      sampleList: ['1/2', '1/4', '1/8', '1/16', '1/32', '1/64', '1/128'],
      featureList: [],
      editForm: {
        groupId: '',
        tagId: '',
        tagNm: '',
        tagStory: '',
        eliminateSeedPeople: false,
        sampleRate: '',
        featureType: 1,
        featureValue: '',
        featureTags: [],
        execFrequency: '',
        execDtList: [],
        execWkList: [],
        execTm: '',
        tagSourceJson: '',
        tagTargetJson: '',
        sourceCustNum: '',
        sourceCustRate: '',
        targetCustNum: '',
        targetCustRate: '',
        previewResults: []
      },
      editFormRules: {
        tagNm: [
          { required: true, message: '标签名称不能为空', trigger: 'blur' },
          { validator: this.$checkEmpty('标签名称不能为空'), trigger: 'blur' }
        ],
        featureType: [{ required: true, message: '特征配置不能为空', trigger: 'change' }],
        featureValue: [{ required: true, message: '特征配置选项不能为空', trigger: 'change' }],
        featureTags: [{ required: true, message: '特征配置选项不能为空', trigger: 'change' }],
        execFrequency: [{ required: true, message: '更新频率不能为空', trigger: 'change' }],
        execDtList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execWkList: [{ required: true, type: 'array', min: 1, message: '至少要选择一项', trigger: 'change' }],
        execTm: [{ required: true, message: '执行时间不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    weekShow(week) {
      let str = ''
      switch (week) {
        case 1:
          str = '日'
          break
        case 2:
          str = '一'
          break
        case 3:
          str = '二'
          break
        case 4:
          str = '三'
          break
        case 5:
          str = '四'
          break
        case 6:
          str = '五'
          break
        case 7:
          str = '六'
          break
      }
      return str
    },
    showDrawer(params) {
      this.editForm.groupId = params.groupId || ''
      this.editForm.tagId = params.tagId || ''
      this.editForm.tagNm = params.tagNm
      this.editForm.tagStory = params.tagStory
      this.editForm.eliminateSeedPeople = params.eliminateSeedPeople
      this.editForm.sampleRate = params.sampleRate
      this.editForm.featureType = params.featureType
      this.editForm.featureValue = params.featureValue ? Number(params.featureValue) : ''
      this.editForm.execFrequency = params.execFrequency
      this.editForm.execDtList = params.execDtList || []
      this.editForm.execWkList = params.execWkList || []
      this.editForm.execTm = params.execTm || ''
      this.editForm.tagSourceJson = params.tagSourceJson
      this.editForm.tagTargetJson = params.tagTargetJson
      this.editForm.sourceCustNum = params.sourceCustNum
      this.editForm.sourceCustRate = params.sourceCustRate
      this.editForm.targetCustNum = params.targetCustNum
      this.editForm.targetCustRate = params.targetCustRate
      this.editForm.previewResults = params.previewResults
      if (this.editForm.featureType === 3) {
        this.editForm.featureValue = ''
        this.editForm.featureTags = JSON.parse(params.featureValue)
      }
      this.getFeatureList()
      this.drawerVisible = true
    },
    deleteTmpl(item) {
      this.$confirm(`确定删除模板【${item.tmplNm}】？`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`ast/astTagImageTmpl/${item.tmplId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            if (item.tmplId === this.editForm.featureValue) this.editForm.featureValue = ''
            this.getFeatureList()
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    },
    getFeatureList() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagImageTmpl/getAllTemp/3'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.featureList = data.data
        } else {
          // 失败后执行的操作
        }
      })
    },
    beforeClose() {
      this.editForm.groupId = ''
      this.editForm.tagId = ''
      this.editForm.tagNm = ''
      this.editForm.tagStory = ''
      this.editForm.eliminateSeedPeople = false
      this.editForm.sampleRate = ''
      this.editForm.featureType = 1
      this.editForm.featureValue = ''
      this.editForm.featureTags = []
      this.editForm.execFrequency = ''
      this.editForm.execDtList = []
      this.editForm.execWkList = []
      this.editForm.execTm = ''
      this.editForm.tagSourceJson = ''
      this.editForm.tagTargetJson = ''
      this.editForm.sourceCustNum = ''
      this.editForm.sourceCustRate = ''
      this.editForm.targetCustNum = ''
      this.editForm.targetCustRate = ''
      this.editForm.previewResults = []
      this.drawerVisible = false
    },
    save() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let params = {
            tagNm: this.editForm.tagNm,
            tagStory: this.editForm.tagStory,
            eliminateSeedPeople: this.editForm.eliminateSeedPeople,
            sampleRate: this.editForm.sampleRate,
            featureType: this.editForm.featureType,
            featureValue: this.editForm.featureValue,
            execFrequency: this.editForm.execFrequency,
            execDtList: this.editForm.execDtList || [],
            execWkList: this.editForm.execWkList || [],
            execTm: this.editForm.execTm || '',
            tagSourceJson: this.editForm.tagSourceJson,
            tagTargetJson: this.editForm.tagTargetJson,
            sourceCustNum: this.editForm.sourceCustNum,
            sourceCustRate: this.editForm.sourceCustRate,
            targetCustNum: this.editForm.targetCustNum,
            targetCustRate: this.editForm.targetCustRate,
            previewResults: this.editForm.previewResults
          }
          if (this.editForm.featureType === 3) params.featureValue = JSON.stringify(this.editForm.featureTags)
          if (this.editForm.tagId) params.tagId = this.editForm.tagId
          if (this.editForm.groupId) params.groupId = this.editForm.groupId
          this.$ajax({
            url: this.$ajax.setUrl('der/derCustExtension/saveCustExtension'),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$emit('callback', {
                tagId: data.data,
                tagNm: this.editForm.tagNm,
                tagStory: this.editForm.tagStory,
                featureType: this.editForm.featureType,
                featureValue: params.featureValue,
                execFrequency: this.editForm.execFrequency,
                execDtList: this.editForm.execDtList,
                execWkList: this.editForm.execWkList,
                execTm: this.editForm.execTm
              })
              this.$message.success(data.msg)
              this.beforeClose()
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.tmpl-select {
  .tmpl-delete {
    float: right;
    width: 18px;
    height: 18px;
    margin-top: 8px;
    text-align: center;
    line-height: 18px;
    border: 1px solid $theme-color;
    border-radius: 50%;
    opacity: 0.4;
  }
  .el-select-dropdown__item:hover {
    .tmpl-delete {
      opacity: 1;
    }
  }
}
</style>
